<template>
	<view class="u-padding-40 page">
		<Navbar title="找工作"></Navbar>
		<view class="u-font-32 u-font-w-6 u-margin-bottom-40">应聘工种</view>
		<view :class="['u-flex', 'type-data', type == 1 && 'choose']" @click="handleType(1)">
			<image src="/static/image/icon-work-nanny.png"></image>
			<text class="u-font-40 u-font-w-6 u-padding-left-38 u-padding-right-30">保姆</text>
			<image style="width: 30rpx;height: 22rpx;" src="/static/image/icon-yes.png" v-if="type == 1"></image>
		</view>
		<view class="u-font-32 u-tips-color u-padding-10 u-margin-bottom-40">
			保姆类型：
			<span v-for="(item,index) in DictionaryList" :key="index">
				{{item.Name}} ,
			</span>
		</view>
		<view :class="['u-flex', 'type-data', type == 2 && 'choose']" @click="handleType(2)">
			<image src="/static/image/icon-work-cleaner.png"></image>
			<text class="u-font-40 u-font-w-6 u-padding-left-38 u-padding-right-30">保洁</text>
			<image style="width: 30rpx;height: 22rpx;" src="/static/image/icon-yes.png" v-if="type == 2"></image>
		</view>
		<view class="u-font-32 u-tips-color u-padding-10 ">
			保洁类型：
			<span v-for="(item,index) in ByCategoryList" :key="index" style="margin-right: 8rpx;">
				{{item.Name}} ,
			</span>
		</view>
		<view style="margin-top: 128rpx;"><u-button type="primary" shape="circle"
				@click="link_to_page('/pages-home/pages/work/form?type=' + type)">确认选择</u-button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				DictionaryList: [],
				ByCategoryList: [],
			};
		},
		onLoad(e) {
			this.getMenu();
		},
		methods: {
			getMenu() {
				const _this = this;
				//保姆筛选条件
				this.$u.api.GetDictionary({
					'type': '岗位类型'
				}).then(res => {
					_this.DictionaryList = res.data || [];
				});
				//保洁服务筛选条件
				this.$u.api.GetByCategory({
					'categoryNo': 100002
				}).then(res => {
					_this.ByCategoryList = res.data || [];
				});

			},
			handleType(e) {
				this.type = e;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;
	}

	.type-data {
		width: 670rpx;
		height: 160rpx;
		padding: 0 54rpx;
		background: #ffffff;
		border-radius: 16rpx;
		border: 1px solid #fff;

		image {
			width: 94rpx;
			height: 94rpx;
		}
	}

	.choose {
		border: 1px solid #dd1a00;
	}
</style>